<template>
  <div class="company">
    <div class="top">
      <!-- 搜索区域 -->
      <div class="head">
        <b>公司</b>
        <van-search
          class="search"
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </div>
      <!-- 图片 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/image/5.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/image/6.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/image/7.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/image/8.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="filter-box">
        <div
          class="recommend"
          @click="look"
          :class="led === 1 ? 'actived' : ''"
        >
          推荐
        </div>
        <div class="distance">
          距离
          <span class="arrow-box"
            ><i
              class="iconfont rotate iconicon_xuanze_sel cll"
              @click="lookclass(2)"
              :class="item === 2 ? 'actived' : ''"
            ></i
            ><i
              class="iconfont iconbtm  iconicon_xuanze_sel cll"
              @click="lookclass(3)"
              :class="item === 3 ? 'actived' : ''"
            ></i
          ></span>
        </div>
        <div class="score">
          评分
          <span class="arrow-box"
            ><i
              class="iconfont rotate iconicon_xuanze_sel"
              @click="faceclass(4)"
              :class="itemss === 4 ? 'actived' : ''"
            ></i
            ><i
              class="iconfont iconbtm  iconicon_xuanze_sel"
              @click="faceclass(5)"
              :class="itemss === 5 ? 'actived' : ''"
            ></i
          ></span>
        </div>
        <!-- 筛选区域-->
        <div class="screening" @click="shaixuan">
          筛选
        </div>
      </div>
    </div>
    <div class="bussiness-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group>
          <van-cell
            class="vancell"
            v-for="(item, index) in companylists"
            :key="index"
          >
            <template #title>
              <div class="title-left">
                <img
                  @click="$router.push(`companyDetail/${item.id}`)"
                  class="business-pic"
                  :src="url + item.logo"
                />

                <div class="info">
                  <div class="title">{{ item.name }}</div>
                  <div class="iocation">
                    <span>{{ item.region }}</span>
                    <span>{{ item.distance }}</span>
                  </div>
                  <div class="business-info">
                    <span>{{ item.type }}</span>
                    <span>{{ item.step }}</span>
                    <span>{{ item.scale }}</span>
                  </div>
                  <div class="list-btm">
                    在招职位 <span>{{ item.positions }}</span> /最后更新时间:
                    {{ item.updated_at | formatTime }}
                  </div>
                </div>
              </div>
            </template>
            <template #default> {{ item.score }}分 </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
    <!-- 筛选框 -->
    <filtCompany
      ref="filtCompany"
      @onLoad="onLoad"
      @onSearch="onSearch"
    ></filtCompany>
  </div>
</template>

<script>
// import $ from 'jquery'
import filtCompany from './filtCompany.vue'
import { companyList } from '@/api/api.js'
export default {
  // watch: {
  //   distance (newVal, oldVal) {
  //     this.onLoad()
  //   },
  //   score (newVal, oldVal) {
  //     this.onLoad()
  //   }
  // },
  components: {
    filtCompany
  },
  created () {
    this.getlist()
  },
  data () {
    return {
      value: '',
      loading: false,
      finished: false,
      limit: 10,
      start: 0,
      companylists: [],
      url: 'https://autumnfish.cn/heimamm_server/',
      showclass: false,
      item: 1, // 距离
      itemss: 0, // 评分
      distance: 'asc',
      score: 'desc',
      scoreRange: '4-5',
      led: 1 // 推荐
    }
  },
  methods: {
    // 得到公司
    async getlist (data) {
      const res = await companyList({ data })

      this.companylists = res.data.data.list
    },
    async onLoad (distance, scores, scoreRange) {
      // 发送请求到服务器得到公司数据
      const res = await companyList({
        limit: this.limit,
        start: this.start,
        distance: this.distance,
        scores: this.score,
        scoreRange: scoreRange
      })

      this.companylists = [...this.companylists, ...res.data.data.list]
      this.start += this.limit
      // 将 loading 改为 false
      this.loading = false
      // 判断返回数据的长度
      if (res.data.data.list.length === 0) {
        this.finished = true
      }
    },
    // 跳转到公司详情界面
    jumpdetail (id) {
      this.$router.push(`/companyDetail/${id}`)
    },
    shaixuan () {
      this.$refs.filtCompany.filtShow = true
    },
    // 高亮
    look () {
      this.led = 1
      this.item = 1
      this.itemss = 1
    },
    lookclass (index) {
      this.led = 0
      if (index === 2) {
        this.companylists = []
        this.distance = 'desc'
        this.item = 2
        this.onLoad()
      } else if (index === 3) {
        this.companylists = []
        this.distance = 'asc'
        this.item = 3
        this.onLoad()
      }
    },
    faceclass (index) {
      this.led = 0
      if (index === 4) {
        this.companylists = []
        this.score = 'desc'
        this.itemss = 4

        this.onLoad()
      } else if (index === 5) {
        this.companylists = []
        this.score = 'asc'
        this.itemss = 5
        this.onLoad()
      }
    },
    async onSearch (value) {
      const q = value
      // 发送请求
      const res = await companyList({ q })
      this.companylists = ''
      // 返回的数据
      this.companylists = res.data.data.list

      this.finished = true
    }
  }
}
</script>
<style lang="less" scoped>
.company {
  .actived {
    color: #e40137;
  }
  margin-top: 20px;
  .bussiness-list {
    margin-top: 280px;
    .vancell {
      padding: 30px 15px;
      padding-bottom: 5px;
    }
    .title-left {
      display: flex;
      .business-pic {
        width: 65px;
        height: 65px;
        // padding-top: 7px;
        margin-right: 10px;
      }
      .info {
        font-size: 8px;
        .title {
          font-size: 18px;
        }
        .iocation {
          span {
            padding-right: 5px;
          }
        }
        .business-info {
          margin-top: 7px;
          span {
            background-color: #f7f4f5;
            padding: 5px 5px;
            margin-right: 10px;
          }
        }
        .list-btm {
          margin-top: 7px;
          color: #b4b4bd;
          span {
            color: #53b5d1;
          }
        }
      }
    }
    /deep/ .van-cell__title {
      flex: 10;
    }
    /deep/ .van-cell__value {
      flex: 2;
    }
  }
  padding: 0 15px;
  .top {
    background-color: #fff;
    width: 100%;
    padding: 0 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .head {
      display: flex;
      align-items: center;
      font-size: 15px;
      h2 {
        padding-bottom: 5px;
      }
      .search {
        flex: 1;
      }
    }
    .my-swipe {
      img {
        width: 100%;
        height: 200px;
      }
    }
    .filter-box[data-v-52fcc116] {
      line-height: 0.6rem;
    }
    .filter-box {
      width: 100%;
      height: 30px;
      margin-top: 20px;
      display: flex;
      line-height: 30px;
      font-size: 16px;
      .recommend {
        flex: 2;
      }
      .distance {
        flex: 2;
      }
      .score {
        flex: 2;
      }
      .arrow-box {
        padding-right: 0px;
        //   // display: inline-block;
        // display: flex;
        // flex-direction: column;
        //   width: 3px;
        //   height: 3px;
        position: relative;
        // padding: 5px 0;
        // top: 0;
        // left: 0;
        color: #b4b4bc;
        .iconbtm {
          position: absolute;
          top: 0px;
          left: 0px;
          padding: 0;
          margin-top: 5px;
        }
        .rotate {
          display: inline-block;
          position: absolute;
          bottom: 3px;
          left: 0px;
          transform: rotate(180deg);
        }
      }
      .screening {
        flex: 4;
        text-align: right;
        margin-right: 10px;
      }
    }
    .buttom {
      overflow: auto;
    }
  }
}
</style>
